<template>
  <div class="hello">
      图册模板{{godetail.status==false}}
      <div v-show="godetail.status==false">
          <div class="filter-right"> 
          <div class="left">
                搜索：<i-input :value.sync="filter.keyword" placeholder="请输入..." style="width: 150px"></i-input>
          </div>
            <Upload
                class="right"
                multiple
                action="//jsonplaceholder.typicode.com/posts/" 
                :on-success="uploadsuccess"
                :on-error="uploaderror"
                :headers="{'subSystemCode':'resource_repast'}"
                :show-upload-list="false"
                >
                <i-button type="ghost" icon="ios-cloud-upload-outline">上传文件</i-button>
            </Upload>
      </div>
        <div class="pagemain">
            图片列表
                            <div>asdasd
                    {{visible}}
                </div>
            <div class="demo-upload-list" v-for="item in defaultList"  @click="godetailfun(item)">
                <template>
                    <img :src="item.url">
                    <!-- <div class="demo-upload-list-cover">
                        <Icon type="ios-eye-outline" @click="handleView(item.name)"></Icon>
                    </div> -->
                </template>

                
                <!-- <Modal title="查看图片" :value="visible">
                    <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
                </Modal> -->
            </div>
        </div>
        <div class="pageitem">
            <Page :total="100" :page-size="20" @on-change="changepage"></Page>
        </div>
      </div>
        <div v-if="godetail.status">
            <upload-detail :uploaddetail="godetail"></upload-detail>
        </div>
  </div>
</template>

<script>
// import ThreeChild from './ThreeChild'
import UploadDetail from './uploaddetail'
export default {
    components: {
        // ThreeChild
        UploadDetail
    },
    data () {
      return {
        filter:{
            keyword:"",
            pagesize:"10",
            pagecount:"",
        },
        godetail:{
            status:false,
            data:"",
        },
        defaultList: [
            {
                'name': 'a42bdcc1178e62b4694c830f028db5c0',
                'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
            },
            {
                'name': 'bc7521e033abdd1e92222d733590f104',
                'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
            }
        ],
        imgName: '',
        visible: false,
      }
    },
    methods: {
        changepage(Pdata){
            this.filter.pagecount = Pdata;
            console.log(Pdata);
        },
        uploadsuccess(data){
            console.log(data)
        },
        uploaderror(data){
            console.log(data)
        },
        godetailfun(data){
            this.godetail.status = true;
            this.godetail.data = data;
        },

        handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (file) {
                // 从 upload 实例删除数据
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess (res, file) {
                // 因为上传过程为实例，这里模拟添加 url
                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
                });
            },
            handleBeforeUpload () {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: '最多只能上传 5 张图片。'
                    });
                }
                return check;
            }
    },
    created(){
        // console.log("进入图册")
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
    padding:10px;
}
.filter-right{
    overflow: hidden;
}
.left{
    float: left;
}
.right{
    float: right;
}
.pagemain{
    width: 100%;
    min-height:500px;
}
.pageitem .ivu-page{
    float:right;
}
    .demo-upload-list{
        display: inline-block;
        width: 200px;
        height: 200px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
